<template>
  <div class="question-form">
    <el-form :model="requestParameters" ref="requestParameters">
      <!-- 第一行 学科 二级目录 标签 关键字-->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
              class="filter-item"
              v-model="requestParameters.subjectID"
              @change="handleSubject"
              filterable
            >
              <el-option
                v-for="item in simpleSubjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select
              class="filter-item"
              filterable
              v-model="requestParameters.catalogID"
            >
              <el-option
                v-for="item in subjectSelect.directoryNameList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select
              class="filter-item"
              filterable
              v-model="requestParameters.tags"
            >
              <el-option
                v-for="item in subjectSelect.tagNameList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="requestParameters.keyword"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 试题类型 难度 方向 录入人 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select
              class="filter-item"
              filterable
              v-model="requestParameters.questionType"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select
              class="filter-item"
              filterable
              v-model="requestParameters.difficulty"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select
              class="filter-item"
              filterable
              v-model="requestParameters.direction"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select
              class="filter-item"
              filterable
              v-model="requestParameters.creatorID"
            >
              <el-option
                v-for="item in simpleUserList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 题目备注  企业简称 城市 清除 搜索按钮-->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="requestParameters.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="requestParameters.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="city">
          <el-form-item label="城市" prop="province">
            <el-select
              class="filter-item"
              style="width: 90px"
              @change="handleProvince"
              filterable
              v-model="requestParameters.province"
            >
              <el-option
                v-for="item in citySelect.province"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="city">
            <el-select
              class="filter-item"
              style="width: 90px; margin-left: 4px"
              filterable
              v-model="requestParameters.city"
            >
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button size="mini" @click="resetForm">清除</el-button>
            <el-button type="primary" size="mini" @click="handleFilter"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as simpleSubjects } from '@/api/hmmm/subjects'
import { list as listDirectorys } from '@/api/hmmm/directorys'
import { list as listTags } from '@/api/hmmm/tags'
import { simple as simpleUser } from '@/api/base/users'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
export default {
  name: 'QuestionForm',
  components: {},
  props: {},
  data () {
    return {
      requestParameters: {
        subjectID: undefined,
        catalogID: undefined,
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: undefined,
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      // 简单学科列表
      simpleSubjectList: [],
      // 用户简单列表
      simpleUserList: [],
      subjectSelect: {
        // 二级目录
        directoryNameList: [],
        // 标签
        tagNameList: []
      },
      // 题型列表
      questionType,
      // 难度列表
      difficulty,
      // 方向列表
      direction
    }
  },
  created () {
    this.getCityData()
    this.getSimpleSubjects()
    this.getSimpleUser()
  },
  methods: {
    // 1. 获取学科简单列表
    async getSimpleSubjects (params) {
      const { data: res } = await simpleSubjects()
      this.simpleSubjectList = res
    },
    // 2. 学科选择过后,二级目录显示下拉选项
    async handleSubject (e) {
      // 发送ajax请求获取二级目录
      const { data: res } = await listDirectorys({ subjectID: e })
      // 发送ajax请求获取标签
      const { data } = await listTags({ subjectID: e })
      // 给二级目录赋值
      this.subjectSelect.directoryNameList = res.items
      // 给标签赋值
      this.subjectSelect.tagNameList = data.items
    },
    // 3. 获取用户简单列表
    async getSimpleUser () {
      const { data: res } = await simpleUser()
      this.simpleUserList = res
    },
    // 4. 点击 "清除" 按钮处理函数
    resetForm () {
      this.$refs.requestParameters.resetFields()
      // 给二级目录清空
      this.subjectSelect.directoryNameList = []
      // 给标签清空
      this.subjectSelect.tagNameList = []
      this.$emit('get-question', this.requestParameters)
    },
    // 5. 点击 "搜索" 信息
    handleFilter () {
      // this.requestParameters.page = 1
      const obj = {}
      for (const key in this.requestParameters) {
        console.log(this.requestParameters[key])
        if (this.requestParameters[key]) {
          obj[key] = this.requestParameters[key]
        }
      }
      obj.page = 1
      console.log(obj)
      this.$emit('get-question', obj)
      // this.$emit('get-question', {
      //   subjectID: 4,
      //   page: 1
      // })
      console.log(this.requestParameters)
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    }
  }
}
</script>

<style lang="less" scoped>
.city {
  display: flex;
  justify-content: flex-end;
}
.el-form-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /deep/.el-form-item__content {
    max-width: 185px;
  }
}
</style>
